<template>
    <div style="display: inline-block;">
        <ShareDialog ref="shareDialog"></ShareDialog>
        <el-dialog
                title="工作区编辑"
                :visible.sync="edit.visiable">
            <el-form ref="form" :model="edit.model" :rules="edit.rules">
                <el-form-item label="工作区名称" prop="name">
                    <el-input v-model="edit.model.name" autocomplete="off" @keyup.enter="onSubmit" ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="edit.visiable = false">取 消</el-button>
                <el-button type="primary" :loading="edit.submitting" @click="onSubmit">确 定</el-button>
            </span>
        </el-dialog>

        <el-button style="color: mediumseagreen; margin-right:5px;" class="el-button-theme" icon="el-icon-plus" size="small" @click="add">新建项目</el-button>
        <el-select style="margin-right:5px;" v-model="current" value-key="id" placeholder="请选择" size="small">
            <el-option
            v-for="item in array"
            :key="item.id"
            :label="item.name"
            :value="item">
              <span style="float: left">{{ item.name }} <span v-if="item.isShare" style="color:orange">[Share]</span> </span>
              <span style="float: right; color: #8492a6; font-size: 13px"  @click.stop>
                  <el-dropdown @command="handleCommand">
                      <span class="el-dropdown-link">
                          <i class="el-icon-more el-icon--right"></i>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item v-if="!item.isShare" :command='{type:"share", param:item}'>分享</el-dropdown-item>
                          <el-dropdown-item>导出</el-dropdown-item>
                          <el-dropdown-item v-if="!item.isShare" :command='{type:"rename", param:item}'>重命名</el-dropdown-item>
                          <el-dropdown-item v-if="!item.isShare" :command='{type:"destroy", param:item}'>删除</el-dropdown-item>
                      </el-dropdown-menu>
                  </el-dropdown>
              </span>
            </el-option>
        </el-select>
    </div>
</template>

<script>
import { read, save, destroy } from '../api/workspace'
import ShareDialog from '@/components/ShareDialog'
export default {
    name: 'Workspace',
    components: {
      ShareDialog
    },
    data () {
        return {
            edit: {
                isNew: true,
                model: {
                    id: '',
                    name: ''
                },
                rules: {
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' }
                    ],
                },
                visiable: false,
                submitting: false,
            },
            current: null,
            array: []
        }
    },
    watch: {
        current(value){
            this.$store.commit('app/setWorkSpace', value)
        }
    },
    mounted() {
        this.read()
    },
    methods: {
        /**
         * 读取工作空间
         */
        read() {
            let that = this
            read().then(response => {
                that.array = response.data
                if(that.array.length > 0){
                    that.current = that.array[0]
                }
            })
        },
        add() {
            this.edit.isNew = true
            this.edit.model = { id: '', name: '' }
            this.edit.visiable = true
        },
        update(item) {
            this.edit.isNew = false
            this.edit.model = item
            this.edit.visiable = true
        },
        onSubmit(){
            let that = this
            this.$refs.form.validate((valid) => {
                if (valid) {
                    that.edit.submitting = true
                    save(that.edit.model).then(response => {
                        const {data} = response
                        if(that.edit.isNew) {
                            that.array.push(data)
                        }
                        that.current = data
                        that.edit.submitting = false
                        that.edit.visiable = false
                    }).catch(error => {
                        that.edit.submitting = false
                    })
                } else {
                    return false;
                }
            });
        },
        handleCommand(command) {
            let that = this
            let {param} = command;
            switch(command.type) {
                case 'share':
                  that.$refs.shareDialog.open(param.id)
                  break;
                case 'rename':
                    that.update(param)
                    break;
                case 'destroy':
                    that.$confirm('此操作将永久删除[' + param.name + '], 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        destroy(param.id)
                        .then(response => {
                            that.array.splice(that.array.indexOf(param),1)
                            // 如果删除的是当前选择项, 则更换一个选择项
                            if(param.id === that.current.id){
                                that.current = that.array[0]
                            }
                            that.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        })
                    }).catch();
                    break;
            }
        }
    }
}
</script>
